<template>
  <div id="main">
       <!-- top -->
    <div class="top">
        <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
        <el-breadcrumb-item>活动列表</el-breadcrumb-item>
        <el-breadcrumb-item>活动详情</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <div class="main">
        <el-col :span="12" style="width:100%">
            <div class="main-d1">
            <div>
            <el-avatar :size="50">
            <i class="el-icon-user"></i>
            </el-avatar>
            </div>

            <div>
            <el-avatar :size="50">
                <i class="el-icon-phone-outline"></i>
            </el-avatar>
            </div>

            <div>
            <el-avatar :size="50">
                <i class="el-icon-s-goods"></i>
            </el-avatar>
            </div>

            <div>
            <el-avatar :size="50">
                <i class="
                el-icon-phone-outline"></i>
            </el-avatar>
            </div>
            </div>
        </el-col>  
    </div>
    <div class="main-d2">
        <p>
            50
            <br>
            会员总价
        </p>
        <p>
            20
            <br>
            友情链接
        </p>
        <p>
            50
            <br>
            会员总价
        </p>
        <p>
            50
            <br>
            会员总价
        </p>
    </div>
    <div class="cb">
        <p>数据统计</p>
        <hr>
    </div>
    <div class="main-d3">
        <v-chart :options="option"></v-chart> 
        <v-chart :options="option1"></v-chart>  
        <v-chart :options='option2'>

        </v-chart>

    </div>
    <div class="cb2">
        <p>
            服务器数据
        </p>
        <hr>
    </div>
    <!-- 最下面的表格 -->
    <div class="main-d4">
        <table>
            <thead>
                <tr>
                    <th>
                        服务器信息
                    </th>
                </tr>
            </thead>
            <tbody class="tbody">
                <tr v-for="(item,index) in text" :key="index">
                    <td>
                    {{ item[0] }}
                    </td>
                    <td> {{ item[1] }}</td>
                    <td> {{ item[2] }}</td>
                    <td> {{ item[3] }}</td>
                </tr>
            </tbody>
        </table>
    </div>

  </div>
</template>

<script>
export default {
     data () {
      return {
          option:{ xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }]},
    option1:{ title: {
        text: '某站点用户访问来源',
        subtext: '纯属虚构',
        left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
                {value: 335, name: '直接访问'},
                {value: 310, name: '邮件营销'},
                {value: 234, name: '联盟广告'},
                {value: 135, name: '视频广告'},
                {value: 1548, name: '搜索引擎'}
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
    },
    option2:{
         tooltip: {
        trigger: 'axis',
        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    legend: {
        data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎', '百度', '谷歌', '必应', '其他']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {
            name: '直接访问',
            type: 'bar',
            data: [320, 332, 301, 334, 390, 330, 320]
        },
        {
            name: '邮件营销',
            type: 'bar',
            stack: '广告',
            data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
            name: '联盟广告',
            type: 'bar',
            stack: '广告',
            data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
            name: '视频广告',
            type: 'bar',
            stack: '广告',
            data: [150, 232, 201, 154, 190, 330, 410]
        },
        {
            name: '搜索引擎',
            type: 'bar',
            data: [862, 1018, 964, 1026, 1679, 1600, 1570],
            markLine: {
                lineStyle: {
                    type: 'dashed'
                },
                data: [
                    [{type: 'min'}, {type: 'max'}]
                ]
            }
        },
        {
            name: '百度',
            type: 'bar',
            barWidth: 5,
            stack: '搜索引擎',
            data: [620, 732, 701, 734, 1090, 1130, 1120]
        },
        {
            name: '谷歌',
            type: 'bar',
            stack: '搜索引擎',
            data: [120, 132, 101, 134, 290, 230, 220]
        },
        {
            name: '必应',
            type: 'bar',
            stack: '搜索引擎',
            data: [60, 72, 71, 74, 190, 130, 110]
        },
        {
            name: '其他',
            type: 'bar',
            stack: '搜索引擎',
            data: [62, 82, 91, 84, 109, 110, 120]
        }
    ]
    },
       text:[
           ["服务器计算机名",'http://127.0.0.1/','服务器IP地址',"192.168.1.1"],
           ["服务器域名 ",
           'www.xxx.net://127.0.0.1/','服务器端口',"80"],
           ["服务器IIS版本",'	Microsoft-IIS/6.0',
           '本文件所在文件夹',"D:WebSite"],
           ["服务器操作系统",'Microsoft Windows','系统所在文件夹',"C:WINDOWSsystem32"],
           ['服务器脚本超时时间',
           '30000秒','服务器的语言种类','Chinese'],
           ['.NET Framework 版本','2.050727.3655',
           '服务器当前时间','2019-6-14 12:06:23'],['服务器IE版本','6.0000','服务器上次启动到现在已运行','7210分钟']]
      }
    }
}
</script>

<style scoped>
*{
    margin: 0;
    padding: 0;
}
.top > div{
    padding: 10px;
    background: rgb(242,242,242);
}
.main-d1 div{
    width: 15%;
    display: inline-block;
    margin: 7px;
    background: rgb(242,242,242);
}
.main-d1 div span {
    background: rgb(245,200,71);
}
.main-d2 p{
    display: inline-block;
    width: 18%;
    color:rgb(254,132,99);
    font-family: yjsz;
}


.cb {
    padding: 15px;
}
.cb p {
    font-size: 12px;
    color:#666;
}

.cb2 {
    padding: 5px;
    border-left: 5px solid #2fb9d4;
}
.cb2 p {
    font-size: 12px;
    color:#666;
}

.main-d3 .echarts {
    display: inline-block;
    width: 30%;
}

.main-d4 table {
    border: 1px solid #ddd;
}




.tbody {
    font-size: 7px;
}

.tbody td {
    padding: 8px;
    width: 140px;
    border: 0.5px solid #666;
}


</style>